<template>
  <div>
    <header class="header1">
      <button class="icon-button" @click="goBack">
        <img
          src="../../../../images/fae98107-94c4-47d1-ab04-f3e21ba7d864.png"
          alt="Back"
        />
      </button>
      <div class="title">绑定信息</div>
      <span></span>
    </header>
    <div>
      <p style="text-indent: 4em; line-height: 25px">
        <span style="padding-bottom: 2px; border-bottom: 1px solid blue">身份证</span>
      </p>
      <div style="width: 80%; margin-left: 10%">
        <!-- 使用 v-if 判断数据是否存在 -->
        <div
          v-if="store.userInfo.name"
          style="
            padding: 10px;
            background-color: #ccc;
            margin-left: 3%;
            border-radius: 15px;
          "
        >
          <p>姓名: {{ store.userInfo.name }}</p>
          <p>性别: {{ store.userInfo.sex }}</p>
          <p>籍贯: {{ store.userInfo.Origin }}</p>
          <p>身份证号: {{ store.userInfo.code }}</p>
        </div>
        <div v-else @click="goIden">
          <img src="../../../../images/sfz.png" style="width: 100%" alt="身份证图片" />
        </div>
      </div>
    </div>
    <div>
      <p style="text-indent: 4em; line-height: 25px">
        <span style="padding-bottom: 2px; border-bottom: 1px solid blue">银行卡</span>
      </p>
      <div
        v-if="store.bankprocessing.Bankcards"
        style="
          width: 77%;
          padding: 10px;
          background-color: #ccc;
          margin-left: 13%;
          border-radius: 15px;
        "
      >
        <p>{{ store.bankprocessing.Bankcards }}</p>
        <p>{{ store.bankprocessing.cardtype }}</p>
        <p>{{ store.bankprocessing.code }}</p>
      </div>
      <div @click="goBank" style="width: 80%; margin-left: 10%" v-else>
        <img src="../../../../images/yhk.png" style="width: 100%" alt="" />
      </div>
    </div>
    <footer class="footer">
      如需更改银行卡信息 请致电
      <a href="tel:000-5967432" class="phone-number">000-5967432</a>
    </footer>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { useStore } from "@/stores/store";

// 使用 Pinia store

const store = useStore();
const { userInfo } = store;
const route = useRoute();

console.log("userInfo", store.userInfo);
console.log("bankprocessing", store.bankprocessing);

const { title, card, passcode } = route.query;
// 使用 computed 来检查是否有数据
const hascard = computed(() => !!title && !!card && !!passcode);
console.log({ title, card, passcode }, "card");

const router = useRouter();

const goBack = () => {
  router.push("Purse");
};
const goIden = () => {
  router.push("Identification");
};
const goBank = () => {
  router.push("BankAmericard");
};
</script>

<style scoped>
.header1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}
.icon-button {
  background: none;
  border: none;
  cursor: pointer;
}

.icon-button img {
  width: 24px;
  height: 24px;
}

.footer {
  text-align: center; /* 居中文本 */
  background-color: #f1f1f1; /* 背景颜色（可选） */
  padding: 10px 0; /* 上下内边距 */
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 靠近底部 */
  width: 100%; /* 100% 宽度 */
}

.footer a.phone-number {
  color: blue; /* 蓝色字体 */
  text-decoration: none; /* 去掉下划线 */
}

.footer a.phone-number:hover {
  text-decoration: underline; /* 悬停时加下划线 */
}
</style>
